//
// Display
// --------------------------------------------------


// Backdrop and layer style

.display-backdrop,
.display-layer,
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.display-backdrop {
  background-color: #000;
  opacity: 0;
  pointer-events: auto;

  .display-stage-shown > & {
    opacity: .5;
  }

  .has-animation > & {
    transition: opacity @animation-type @animation-speed-fast;
  }
}


.display-layer {
  z-index: @zindex-display-layer;
  background: none;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.display {
  position: relative;
  pointer-events: auto;
  max-height: 100%;
  max-width: 100%;

  > .heading {
    z-index: @zindex-display-heading;
  }
}

.display-stage-init {
  display: none;
}
